<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>归档</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big" style="height: 800px!important;">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached padded segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui teal header">归档</h3>
          </div>
          <div class="right aligned column">
            共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogCount}"> 114 </h2> 篇博客
          </div>
        </div>
      </div>

      <th:block th:each="item : ${archiveMap}">
      <h3 class="ui center aligned header" th:text="${item.key}">2023</h3>
      <div class="ui fluid vertical menu">
        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${item.value}">
          <span>
            <i class="mini teal circle icon"></i><span th:text="${blog.title}">关于刻意练习的清单</span>
            <div class="ui teal basic left pointing label m-padded-mini " th:text="${#dates.format(blog.updateTime,'MMMdd')}">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini " th:text="${blog.flag}">原创</div>
        </a>
        <!--/*-->
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <!--*/-->
      </div>
      </th:block>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：2487774519@qq.com</a>
            <a href="#" class="item m-text-thin">QQ：2487774519</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny"> © 2023 - 2023  Designed by 专业团队</p>
    </div>

  </footer>
  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!--/*/</th:block>/*/-->
  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>

  <!--点击特效Begin-->
  <script>
    (function () {
      var a_idx = 0;
      window.onclick = function (event) {
        var a = new Array("(๑◕ܫ￩๑)b","╮(๑•́ ₃•̀๑)╭"," (｡◕ฺˇε ˇ◕ฺ｡）","(ฅ′ω`ฅ)","♪（＾∀＾●）ﾉｼ","  ˶⚈Ɛ⚈˵ ",
                " (╬￣皿￣)凸","ʅ（′◔౪◔）ʃ","ヾ(o◕∀◕)ﾉ ","♥(｡￫v￩｡)♥");

        var heart = document.createElement("b"); //创建b元素
        heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

        document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
        a_idx = (a_idx + 1) % a.length;
        heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

        var f = 16, // 字体大小
                x = event.clientX - f / 2, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 1.2; // 放大缩小

        var timer = setInterval(function () { //添加定时器
          if (a <= 0) {
            document.body.removeChild(heart);
            clearInterval(timer);
          } else {
            heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                    c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                    s + ");";

            y--;
            a -= 0.016;
            s += 0.002;
          }
        }, 15)

      }
      // 随机颜色
      function randomColor() {

        return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";

      }
    }());
  </script>
  <!--点击特效End-->


  <!--樱花特效Begin-->
  <script>
    let stop, staticx;
    const img = new Image();
    img.src = "";

    function Sakura(x, y, s, r, fn) {
      this.x = x;
      this.y = y;
      this.s = s;
      this.r = r;
      this.fn = fn;
    }

    Sakura.prototype.draw = function (cxt) {
      cxt.save();
      const xc = 40 * this.s / 4;
      cxt.translate(this.x, this.y);
      cxt.rotate(this.r);
      cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
      cxt.restore();
    }

    Sakura.prototype.update = function () {
      this.x = this.fn.x(this.x, this.y);
      this.y = this.fn.y(this.y, this.y);
      this.r = this.fn.r(this.r);
      if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
        this.r = getRandom('fnr');
        if (Math.random() > 0.4) {
          this.x = getRandom('x');
          this.y = 0;
          this.s = getRandom('s');
          this.r = getRandom('r');
        } else {
          this.x = window.innerWidth;
          this.y = getRandom('y');
          this.s = getRandom('s');
          this.r = getRandom('r');
        }
      }
    }

    SakuraList = function () {
      this.list = [];
    }
    SakuraList.prototype.push = function (sakura) {
      this.list.push(sakura);
    }
    SakuraList.prototype.update = function () {
      let i = 0, len = this.list.length;
      for (; i < len; i++) {
        this.list[i].update();
      }
    }
    SakuraList.prototype.draw = function (cxt) {
      let i = 0, len = this.list.length;
      for (; i < len; i++) {
        this.list[i].draw(cxt);
      }
    }
    SakuraList.prototype.get = function (i) {
      return this.list[i];
    }
    SakuraList.prototype.size = function () {
      return this.list.length;
    }

    function getRandom(option) {
      let ret, random;
      switch (option) {
        case 'x':
          ret = Math.random() * window.innerWidth;
          break;
        case 'y':
          ret = Math.random() * window.innerHeight;
          break;
        case 's':
          ret = Math.random();
          break;
        case 'r':
          ret = Math.random() * 6;
          break;
        case 'fnx':
          random = -0.5 + Math.random();
          ret = function (x, y) {
            return x + 0.5 * random - 1.7;
          };
          break;
        case 'fny':
          random = 1.5 + Math.random() * 0.7
          ret = function (x, y) {
            return y + random;
          };
          break;
        case 'fnr':
          random = Math.random() * 0.03;
          ret = function (r) {
            return r + random;
          };
          break;
      }
      return ret;
    }

    function startSakura() {

      requestAnimationFrame = window.requestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              window.webkitRequestAnimationFrame ||
              window.msRequestAnimationFrame ||
              window.oRequestAnimationFrame;
      let canvas = document.createElement('canvas'),
              cxt;
      staticx = true;
      canvas.height = window.innerHeight;
      canvas.width = window.innerWidth;
      canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
      canvas.setAttribute('id', 'canvas_sakura');
      document.getElementsByTagName('body')[0].appendChild(canvas);
      cxt = canvas.getContext('2d');
      const sakuraList = new SakuraList();
      for (let i = 0; i < 50; i++) {
        let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;
        randomX = getRandom('x');
        randomY = getRandom('y');
        randomR = getRandom('r');
        randomS = getRandom('s');
        randomFnx = getRandom('fnx');
        randomFny = getRandom('fny');
        randomFnR = getRandom('fnr');
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
          x: randomFnx,
          y: randomFny,
          r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura);
      }
      stop = requestAnimationFrame(function () {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee);
      })
    }

    window.onresize = function () {
      const canvasSnow = document.getElementById('canvas_sakura');
      canvasSnow.width = window.innerWidth;
      canvasSnow.height = window.innerHeight;
    }

    img.onload = function () {
      startSakura();
    }

    function stopp() {
      if (staticx) {
        const child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false;
      } else {
        startSakura();
      }
    }
  </script>


</body>
</html>